const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
      entry : {
            "index" : "./src/index/entry.js",
            "list"  : "./src/list/entry.js",
            "cart"  : "./src/cart/entry.js",
            "detail"  : "./src/detail/entry.js",
            "login"  : "./src/login/entry.js",
            "register" : "./src/register/entry.js",
            "repassword" : "./src/repassword/entry.js"
      },

      mode : "production",

      output : {
            path: path.resolve(__dirname, 'dist'),
            filename: 'javascripts/[name].js',
      },
      // loader配置 : 
      module : {
            rules : [
                  {
                        test: /\.m?js$/,
                        exclude: /node_modules/,
                        use: {
                          loader: 'babel-loader',
                          options: {
                            presets: [
                              ['@babel/preset-env', { targets: "defaults" }]
                            ],
                            plugins: ['@babel/plugin-proposal-class-properties']
                          }
                        }
                  },
                  {
                        test : /\.css$/,  
                        use : [
                              MiniCssExtractPlugin.loader,
                              "css-loader"
                        ]
                  },
                  {
                        test : /\.s(c|a)ss$/,
                        use : [
                              MiniCssExtractPlugin.loader,
                              "css-loader",
                              "sass-loader"
                        ]
                  },
                  {
                        test : /\.html$/,
                        use : ["html-loader"]
                  },
                  {
                        test :  /\.(jpg|png|gif)$/,
                        loader :"url-loader",
                        options: {
                              limit: 1024 * 24,
                              name: 'images/[hash].[ext]',
                              esModule: false,
                         },
                         type: 'javascript/auto'
                  }
            ]
      },
      // 插件 : 
      plugins : [
            new webpack.ProgressPlugin(),

            new MiniCssExtractPlugin({
                  filename: 'css/[hash].css'
            }),

            new CleanWebpackPlugin(),

            new webpack.ProvidePlugin({
                  $ : "jquery",
                  axios : "axios",
            }),

            new HtmlWebpackPlugin( {
                  template : "./src/index/index.html",
                  inject : "body",
                  filename : "index.html",
                  chunks : ["index"]
            } ),

            new HtmlWebpackPlugin( {
                  template : "./src/list/list.html",
                  inject : "body",
                  filename : "list.html",
                  chunks : ["list"]
            } ),

            new HtmlWebpackPlugin( {
                  template : "./src/cart/cart.html",
                  inject : "body",
                  filename : "cart.html",
                  chunks : ["cart"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/login/login.html",
                  inject : "body",
                  filename : "login.html",
                  chunks : ["login"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/register/register.html",
                  inject : "body",
                  filename : "register.html",
                  chunks : ["register"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/detail/detail.html",
                  inject : "body",
                  filename : "detail.html",
                  chunks : ["detail"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/repassword/repassword.html",
                  inject : "body",
                  filename : "repassword.html",
                  chunks : ["repassword"]
            } )
      ],
      // 优化 : 
      optimization: {
            splitChunks: {
                chunks: 'all',
                // 缓存分组
                cacheGroups: {
                    // 第三方模块
                    vendor: {
                        name: 'vendor', 
                        priority: 1, 
                        test: /node_modules/,
                        minSize: 0, 
                        minChunks: 1  
                    },
    
                    // 公共的模块
                    common: {
                        name: 'common', 
                        priority: 0, 
                        minSize: 0, 
                        minChunks: 2 
                    }
                }
            }
        }
}

